<template>
	<view class="content">
		<view class="bgColor">
			<image src="/static/home/wpddxyBg.png" mode=""></image>
		</view>
		<cusHeaderVue titleContent="未跑店动销员" :showBack="true"></cusHeaderVue>
		<view class="contBox" :style="{paddingTop: `calc(${scrollerHeight} + 130rpx)`}">
			<view class="contTop">
				<view class="contTit">
				共计<text>{{ notExecutedList.length }}</text>人
				</view>
				<view class="contTime" @click="selectMonth">
					{{selectedMonth}}
					<u-icon name="arrow-down-fill" color="#F79F31" size="10"></u-icon>
				</view>
			</view>
		</view>
		<view class="contBoxBig">
			<scroll-view scroll-y="true" :style="{height:swiperHeight}">

				<view class="listBox">
					<view class="listLi" v-for="(item,index) in notExecutedList" :key="index">
						<view class="listLeft">
							<view class="listName">{{ item.nickname || '—' }}</view>
							<view class="listTime">本月到店打卡: {{ getCheckCount(item) }}次</view>
						</view>
						<view class="listRight" v-if="isOnLeave(item)">请假中</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<MonthPickerPopup ref="monthPickerRef" @confirm="onMonthConfirm" @cancel="onMonthCancel" type="date" />
	</view>
</template>
<script setup>
	import cusHeaderVue from '@/components/cus-header.vue';
	import MonthPickerPopup from '@/components/MonthPickerPopup.vue';
	import {
		ref,
		onMounted,
		reactive,
		getCurrentInstance
	} from 'vue';
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	import {
		GETNotExecutedShops
	} from '@/api/interface.js';
	const scrollerHeight = ref('');
	const swiperHeight = ref('');
	const monthPickerRef = ref(null);
	onLoad(() => {
		getBarHeight();
		initDefaultMonth();
	})
	//获取状态栏高度
	const getBarHeight = () => {
		uni.getSystemInfo({
			success: function(resu) {
				scrollerHeight.value = resu.statusBarHeight + 'px'
				// resu 可以获取当前屏幕的高度
				const query = uni.createSelectorQuery();
				query.select('.contBoxBig').boundingClientRect(); //.swiper是swiper类名，获取当前swiper距离顶部的位置
				query.exec(res => {
					swiperHeight.value = resu.windowHeight - res[0].top - resu.safeAreaInsets
						.bottom - resu.statusBarHeight - 70 +
						'px'; //屏幕的高度减去当前swiper距离顶部的高度就是剩余屏幕的高度 然后动态赋值给swiper
				});
			}
		});
	}
	const selectedMonth = ref('');
	// 解析 "YYYY年MM月DD日" 或 "YYYY年MM月" 为 "YYYY-MM-DD"
	const parseToYMD = (val) => {
		if (!val || typeof val !== 'string') {
			const d = new Date();
			const y = d.getFullYear();
			const m = String(d.getMonth() + 1).padStart(2, '0');
			const day = String(d.getDate()).padStart(2, '0');
			return `${y}-${m}-${day}`;
		}
		const full = val.match(/(\d{4})年(\d{1,2})月(\d{1,2})日/);
		if (full) {
			const y = full[1];
			const m = String(parseInt(full[2])).padStart(2, '0');
			const d = String(parseInt(full[3])).padStart(2, '0');
			return `${y}-${m}-${d}`;
		}
		const ym = val.match(/(\d{4})年(\d{1,2})月/);
		if (ym) {
			const y = ym[1];
			const m = String(parseInt(ym[2])).padStart(2, '0');
			const today = new Date();
			const daysInMonth = new Date(parseInt(y), parseInt(m), 0).getDate();
			const d = String(Math.min(today.getDate(), daysInMonth)).padStart(2, '0');
			return `${y}-${m}-${d}`;
		}
		return val; // 已经是 YYYY-MM-DD
	};
	// 调用接口获取未跑店数据
	const notExecutedList = ref([]);
	// 统一统计次数：优先 monthlyCheckCount 其次 详情数组长度
	const getCheckCount = (item) => {
		if (!item) return 0;
		if (item.monthlyCheckCount != null) return Number(item.monthlyCheckCount) || 0;
		const arr = item.dxShopCheckDOS || [];
		return Array.isArray(arr) ? arr.length : 0;
	};

	// 是否请假：兼容 isQj / isQi 两种字段名
	const isOnLeave = (item) => {
		if (!item) return false;
		return Boolean(item.isQj ?? item.isQi ?? false);
	};
	const getList = async () => {
		const todayStr = parseToYMD(selectedMonth.value);
		try {
			const res = await GETNotExecutedShops({ todayStr });
			if (res && res.code === 0) {
				// 兼容不同返回结构
				notExecutedList.value = res.data?.list || res.data || [];
				console.log('未跑店数据', { todayStr, list: notExecutedList.value });
			} else {
				uni.showToast({ title: res?.message || '获取数据失败', icon: 'none' });
				notExecutedList.value = [];
			}
		} catch (err) {
			console.error('GETNotExecutedShops异常:', err);
			uni.showToast({ title: '网络异常，请稍后重试', icon: 'none' });
			notExecutedList.value = [];
		}
	};
	// 选择月份确认
	const onMonthConfirm = (month) => {
		selectedMonth.value = month; // 期望格式：YYYY年MM月DD日
		getList();
	};
	// 初始化默认日期（年月日）
	const initDefaultMonth = () => {
		const now = new Date();
		const year = now.getFullYear();
		const month = now.getMonth() + 1;
		const day = now.getDate();
		selectedMonth.value = `${year}年${month.toString().padStart(2, '0')}月${day.toString().padStart(2, '0')}日`;
		getList();
	};
	// 打开年月选择器
	const selectMonth = () => {
		monthPickerRef.value.open();
	};
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
	}

	.bgColor {
		width: 750rpx;
		height: 740rpx;
		position: absolute;
		z-index: -1;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.contBox {
		width: 100%;
		padding: 22rpx;
		box-sizing: border-box;

		.contTop {
			padding: 0 24rpx;
			box-sizing: border-box;

			.contTit {
				font-weight: 500;
				font-size: 34.92rpx;
				color: #1C2027;

				text {
					font-size: 63.39rpx;
					font-weight: 400;
					color: #FB3D3F;
				}
			}

			.contTime {
				min-width: 230.9rpx;
				height: 56.41rpx;
				max-width: 260rpx;
				text-align: center;
				border-radius: 10.26rpx 10.26rpx 10.26rpx 10.26rpx;
				background: #ffffff;
				margin-top: 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #222222;
				font-weight: 400;
				font-size: 29.49rpx;
				padding: 0 22rpx;
				box-sizing: border-box;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}

	.contBoxBig {

		padding: 10rpx 22rpx;
		box-sizing: border-box;

		.listBox {
			.listLi {
				width: 100%;
				border-radius: 12.82rpx 12.82rpx 12.82rpx 12.82rpx;
				background: #ffffff;
				padding: 35rpx 27rpx;
				box-sizing: border-box;
				margin-bottom: 19rpx;
				display: flex;
				align-items: center;

				.listLeft {
					flex: 1;

					.listName {
						font-weight: 500;
						font-size: 33.33rpx;
						color: #1C2027;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						width: 505rpx;
					}

					.listTime {
						color: #7f8494;
						font-weight: 400;
						font-size: 25.64rpx;
						margin-top: 22rpx;
					}
				}

				.listRight {
					width: 108.33rpx;
					height: 44.87rpx;
					border-radius: 6.41rpx 6.41rpx 6.41rpx 6.41rpx;
					background: #ffe8e3;
					font-size: 24.36rpx;
					font-weight: 400;
					color: #FB3D3F;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.listRightA {
					color: #FA871E;
					border: 1px solid #FA871E;
				}
			}
		}
	}
</style>